(function(){
    //通过js自定义了一个类
    var Components = function(){
        //一个组件，对应回复按钮
        this.reply = function(obj){ //构造
            //属性，模板字符串
            this.template = `<div class="tab-pane"  role="tabpanel" aria-expanded="true">
                                <form class="discuss-form">
                                    <div class="form-group is-empty">
                                        <textarea class="form-control" ></textarea>
                                    </div>
                                    <button class="btn btn-primary btn-md-2 disabled commit-discuss">发布</button>
                                </form>
                            </div>`;
            //要对哪一个回复按钮做操作
            this.domReply = obj;
            //收起，移除动态插入的文本域
            this.collapseDown = function(){
                $(this.domReply).html("<span class='glyphicon glyphicon-collapse-up'></span> 收起").addClass('active');
                $(this.domReply).after(this.template);
            };
            //动态插入文本域，实现回复的功能
            this.collapseUp = function(){
                $(this.domReply).html('<span class="glyphicon glyphicon-edit"></span> 回复').removeClass('active').next().remove();
            }
        };
    }

    //实例化组件对象
    var components = new Components();

    $(".comments-list").on("click",".reply",function(e) {
        //实例化reply对象
        var reply = new components.reply(this);//this指当前触发click事件的dom对象

        e.preventDefault(); //阻止a标签的默认行为

        if ($(this).hasClass('active')) { //判断是否包含active，有则移除文本域，无则添加文本域
            reply.collapseUp();//移除
        } else {
            reply.collapseDown(); //插入
        }
    });

    $(".comments-list").on('keyup','textarea',function () {
        var discuss = $(this).val();
        var commitDiscuss = $(this).parent().next();
        console.log(commitDiscuss);
        if (discuss !== '') {//一旦文本域不为空，则说明用户输入了内容
            commitDiscuss.removeClass('disabled') //移除按钮的禁用样式
        } else { //如果文本域的值为空，则需要添加禁用按钮的样式
            if (!commitDiscuss.hasClass("disabled")) { //判断当前按钮是否包含disabled类，如果没有则添加
                commitDiscuss.addClass("disabled")
            }
        }
    });

    $("#discuss-form textarea").keyup(function(){
        var discuss = $(this).val();
        var commitDiscuss = $(this).parent().next();
        console.log(commitDiscuss);
        if (discuss !== '') {//一旦文本域不为空，则说明用户输入了内容
            commitDiscuss.removeClass('disabled') //移除按钮的禁用样式
        } else { //如果文本域的值为空，则需要添加禁用按钮的样式
            if (!commitDiscuss.hasClass("disabled")) { //判断当前按钮是否包含disabled类，如果没有则添加
                commitDiscuss.addClass("disabled")
            }
        }
    });

    //发布留言
    $("#discuss-form").submit(function(e){
        e.preventDefault();
        $.post('discuss',{
            messageId:$("[name='messageId']").val(),
            content:$("[name='content']").val()
        },function(response){
            if (response.code == 200) {
                toastr.success('发表成功')
                var pic = $(".avatar").attr("src");//登录用户的头像
                var template = `<li class="comment-item">
                            <div class="post__author author vcard inline-items">
                                <img src="${pic}" alt="author">
                                <div class="author-date">
                                    <a class="h6 post__author-name fn" href="02-ProfilePage.html">
                                        ${$('.author-title').text()}
                                    </a>
                                    <div class="post__date">
                                        <time class="published" datetime="2004-07-24T18:18"> 刚刚</time>
                                    </div>
                                </div>
                                <a href="#" class="more">
                                    <span class="glyphicon glyphicon-thumbs-up"></span>
                                    <span>24</span>
                                </a>
                            </div>
                            <p>${$("[name='content']").val()}</p>

                            <a href="javascript:void(0);" class="reply">
                                <span class="glyphicon glyphicon-edit"></span> 回复
                            </a>
                        </li>`;
                $(".comments-list").prepend(template);
            } else {
                toastr.error('发表失败')
            }
        },'json');
    });
})();